<template lang="">
  <div>
    <el-dialog :title="formData.id?'编辑权限':'添加角色'" :visible="showEditDialog" @close="cancelFn">
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <el-form-item prop="title" label="权限名称">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item prop="description" label="权限描述">
          <el-input v-model="formData.description" />
        </el-form-item>
        <!-- <el-form-item prop="permissions" label="权限列表"> -->
        <!-- <el-input v-model="formData.description"></el-input> -->
        <!-- check-strictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
            show-checkbox:子节点是否可被选择
        -->
        <!-- <el-tree ref="tree" :data="assignPermList" show-checkbox node-key="id" default-expand-all show-checkbox
            check-strictly :props="{label:'title'}">
          </el-tree>
        </el-form-item> -->
      </el-form>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
        <el-button size="small" @click="cancelFn">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getPermDetail, editRolePerm, addAssignPerm } from '@/api/rolemanage.js'
// import { getPermList } from '@/api/permissions.js'
export default {
  props: {
    showEditDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '', // 权限名称
        // permissions: [],   // 权限数组
        description: '' // 权限描述
      },
      assignPermList: [], // 权限列表数据
      // currId: null,  // 被点击那条数据的id
      rules: {
        title: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '权限名称只能2到10个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '权限名称只能2到100个字符', trigger: 'blur' }
        ]
      }
    }
  },

    methods: {
      // 获取详情  数据回显
      async getPermDetail(id) {
        this.formData = await getPermDetail(id)
        // console.log(79, this.formData);
      },
      // 弹窗的确认按钮
      async confirmFn() {
        try {
          // 表单校验
        await this.$refs.form.validate()
          // 如果有id就是编辑弹窗  否则就是添加角色弹窗
          if (this.formData.id) {
            // 编辑角色
            // 调用编辑接口函数
            let res = await editRolePerm(this.formData)
            // console.log(51, res);
          } else {
            // 新增角色
            await addAssignPerm({
              title: this.formData.title, description: this.formData.description
            })
          }
        } catch (error) {
          console.log(error);
        }
        // 关闭弹窗
        this.cancelFn()
        // 通知父组建刷新列表
        this.$emit('update')
      },
      // 子传父 关闭弹窗
      cancelFn() {
        // 清空数据
        this.formData = {
          title: '',
          // permissions: [],
          description: '',
        }
        // 清空校验规则
        this.$refs.form.resetFields()
        // 关闭弹窗
        this.$emit('update:showEditDialog', false)
      }
    },
  }
</script>
<style lang="">

</style>
